JavaScript存在的目的是為了將靜態HTML文件轉為互動式的網頁。
Document Object Model(DOM)是用來表示與操作HTML及XML文件內容的API。
<html>
<head>
<title>this is TITLE</title>
</head>
<body>
<h1>this is h1 !</h1>
<p>this is p</p>
</body>
</html>
DOM 模型
類別階層架構
使用Document物件的getElementById()var getById= document.getElementById('idname')
getElementName()是由HTMLDocument類別定義，非Document物件。
getElementName()會回傳一個NodeList物件。
只有特定標籤如表單(<form>)、表單元素、<iframe>、<img>。
如果是使用在iframe，回傳的會是該頁框的Window物件，非Elelent物件var getByName= document.getElementByName('name')
使用Document物件的getElementByTagName()
getElementTagName()會回傳一個NodeList物件。
會回傳NodeList物件var getByCssName= document.getElementByClassName('css_Class_Name')
使用Document物件的querrySelectorAll()會回傳NodeList物件、querrySelector()會回傳第一個符合的元素。var getByCssSelector= document.querrySelectorAll('#id')var getByCssSelector= document.querrySelectorAll('boyd>h1:first-child')
有時從Document中選取了一個Element後，希望找出結構上下關係。
一個Document可視為Node物件所組成，
getElementsByName(),getElementsByTagName()回傳NodeList
document.images,document.forms回傳HTMLCollection
HTML元素由一個tag及多組的key-value所組成的屬性。
document.getElementById('hplogo') google首頁
glImg.src;
// "https://www.google.com.tw/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
利用getAttribute()、setAttribute()查詢非HTML屬性glImg.getAttribute('WIDTH')
利用hasAttribute()、removeAttribute()檢查屬性是否存在與移除屬性glImg.hasAttribute('width')
HTML5提供任何屬性名稱以data-開頭(dataset attributes)，被視為合法屬性，定義了元素額外的附加資料。
<div id="box" data-color="blue" data-border="2">HTML</div>
var box = document.getElementById('box');
var _color = box.dataset.color; // _color="blue"
var _border = parseFloat(box.dataset.border) // _border=2
iThome鐵人賽
看影片追技術